'use client';

import { TrendingUp } from 'lucide-react';
import { Area, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle
} from '@/components/ui/card';
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent
} from '@/components/ui/chart';

// 更新数据结构
const chartData = [
  { month: '一月', completed: 86, pending: 30, total: 116 },
  { month: '二月', completed: 105, pending: 45, total: 150 },
  { month: '三月', completed: 137, pending: 32, total: 169 },
  { month: '四月', completed: 93, pending: 28, total: 121 },
  { month: '五月', completed: 109, pending: 42, total: 151 },
  { month: '六月', completed: 124, pending: 36, total: 160 }
];

const chartConfig = {
  completed: {
    label: '已完成任务',
    color: 'hsl(var(--chart-1))'
  },
  pending: {
    label: '待处理任务',
    color: 'hsl(var(--chart-2))'
  },
  total: {
    label: '总任务数'
  }
} satisfies ChartConfig;

export function AreaGraph() {
  // 计算完成率趋势
  const completionRates = chartData.map(data => ({
    month: data.month,
    rate: ((data.completed / data.total) * 100).toFixed(1)
  }));

  const currentRate = completionRates[completionRates.length - 1].rate;
  const previousRate = completionRates[completionRates.length - 2].rate;
  const rateChange = (Number(currentRate) - Number(previousRate)).toFixed(1);

  return (
    <Card>
      <CardHeader>
        <CardTitle>任务完成趋势</CardTitle>
        <CardDescription>
          展示近6个月任务完成情况
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-[310px] w-full"
        >
          <AreaChart
            data={chartData}
            margin={{
              left: 12,
              right: 12,
              top: 12,
              bottom: 12
            }}
          >
            <CartesianGrid vertical={false} strokeDasharray="3 3" />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value}
            />
            <YAxis
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => `${value}个`}
            />
            <ChartTooltip
              cursor={false}
              content={
                <ChartTooltipContent 
                  formatter={(value, name) => {
                    if (name === 'completed') {
                      return [`${value} 个`, '已完成'];
                    }
                    if (name === 'pending') {
                      return [`${value} 个`, '待处理'];
                    }
                    return [`${value} 个`, '总任务'];
                  }}
                />
              }
            />
            <Area
              type="monotone"
              dataKey="total"
              stroke="var(--color-total)"
              fill="none"
              strokeDasharray="5 5"
              strokeWidth={2}
            />
            <Area
              dataKey="completed"
              type="monotone"
              fill="var(--color-completed)"
              fillOpacity={0.4}
              stroke="var(--color-completed)"
              stackId="a"
            />
            <Area
              dataKey="pending"
              type="monotone"
              fill="var(--color-pending)"
              fillOpacity={0.4}
              stroke="var(--color-pending)"
              stackId="a"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
      <CardFooter>
        <div className="flex w-full items-start gap-2 text-sm">
          <div className="grid gap-2">
            <div className="flex items-center gap-2 font-medium leading-none">
              当前完成率 {currentRate}% 
              <span className={Number(rateChange) > 0 ? 'text-green-500' : 'text-red-500'}>
                {Number(rateChange) > 0 ? '↑' : '↓'} {Math.abs(Number(rateChange))}%
              </span>
              <TrendingUp className="h-4 w-4" />
            </div>
            <div className="flex items-center gap-2 leading-none text-muted-foreground">
              2024年上半年任务统计
            </div>
          </div>
        </div>
      </CardFooter>
    </Card>
  );
}